<template>
	<view>
		<!-- 某一周的课 -->
		<view
			style="z-index: 10; position: absolute;display: flex;flex-direction: column;padding: 5rpx;border-radius: 10rpx;border:solid 1px; "
			v-if="courses.length" v-for="(course, index) in courses" :animation="course.animation" :key='index'
			@click="more(course)" v-bind:style="{
			height: course.height + 'rpx',
			backgroundColor: course.week == todayWeek && course.day == todayDay ? course.color.fill_color:course.color.background_color,
			color: course.week == todayWeek && course.day == todayDay ?'#fff':course.color.font_color,
			left: course.left + 'rpx',
			top: course.top + 'rpx',
			width: course.width + 'rpx',
			'z-index': course.zindex,
			'box-shadow': course.moved ? '4rpx 4rpx 20rpx 1px rgba(0, 0, 0, 0.17)' : 'none',
			border: course.moved ? 'solid 1px' : 'none'
		}">

			<view style="font-size:24rpx;" class="topic_cont_text">{{ course.name }}</view>
			<view style="font-size:22rpx;" class="topic_cont_text">{{ course.location }}</view>
		</view>
		<view v-if="showMask" @click="closeMask" class="mask-style"> </view>
	</view>

</template>

<script>
	export default {
		name: 'course',
		props: {
			showingWeek: Number,
			courses: Array,
			todayWeek: Number,
			todayDay: Number,
			timeSlots: Array,
		},
		data() {
			return {
				showMask: false,
				showingCourseDay: undefined,
				showingCoursePeriod: undefined,
			}
		},
		mounted() {
			// console.log("courses is mounted")
		},
		methods: {
			closeMask() {
				var that = this;
				// this.mask_ani = 'hide_mask_ani';
				setTimeout(function() {
					that.showMask = false;
				}, 200);
				this.$emit('hideOverlapping', {
					'week': this.showingWeek,
					'day': this.showingCourseDay,
					'period': this.showingCoursePeriod
				})
			},
			// 处理点击课程的事件，当点击的时间方格内只有一个课程，则进入课程的编辑页面，若有两个或以上，则将课程展开、背景虚化
			more(showing_course) {
				console.log("more", showing_course.overlapped, showing_course.name)
				this.popup_showing_course = showing_course
				this.showingCourseDay = showing_course.day
				this.showingCoursePeriod = showing_course.periods[0]
				var object_list = this.timeSlots[this.showingCourseDay][this.showingCoursePeriod];

				// var index = object_list[0].id
				if (object_list.length == 1) {
					// getApp().globalData.current_event_index =
					getApp().globalData.event = showing_course
					// getApp().globalData.change_kechengbiao = 1
					uni.navigateTo({
						url: 'change'
					})
				} else if (showing_course.overlapped == true) {
					getApp().globalData.event = showing_course
					uni.navigateTo({
						url: 'change'
					})
					setTimeout(this.closeMask,300)
				} else {
					this.showMask = true
					this.$emit('clickOverLapping', {
						'week': this.showingWeek,
						'day': this.showingCourseDay,
						'period': this.showingCoursePeriod
					})
				}
			},
		}
	}
</script>

<style>
	.topic_cont_text {
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 3;
		/** 显示的行数 **/
		font-family: 'pingfang';
	}

	.mask-style {
		opacity: 0.8;
		position: absolute;
		display: flex;
		z-index: 50;
		height: 100vh;
		width: 100vw;
		box-shadow: none;
		-webkit-backdrop-filter: saturate(180%) blur(64rpx);
		backdrop-filter: saturate(180%) blur(64rpx);
		background: rgba(256, 256, 256, 0.5);
	}

	@keyframes stop {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes start {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.show_mask_ani {
		animation: start 0.2s forwards;
	}

	.hide_mask_ani {
		animation: stop 0.2s forwards;
	}
</style>